<template>
    <div class="container">
        <div class="box">
            <div class="login-content-left">
                <img src="@/assets/login/left.jpg" />
                <div class="login-content-left-mask">
                    <div>{{ $t(systemTitle) }}</div>
                    <div>{{ $t(systemSubTitle) }}</div>
                </div>
            </div>

            <div class="box-inner">
                <h1>{{ $t('message.system.register') }}</h1>
                <!--注册表单 -->
                <el-form :model="form" :rules="rules" ref="ruleForm" class="form">
                    <!-- 输入框：学号 -->
                    <el-form-item prop="user_id">
                        <el-input size="large" maxlength="15" v-model="form.user_id" placeholder="学号 / 工号" type="text">
                            <template #prepend>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- 输入框：密码 -->
                    <el-form-item prop="password">
                        <el-input size="large" ref="password" v-model="form.password" :type="passwordType"
                            :placeholder="$t('message.system.password')" name="password" maxlength="18">
                            <template #prepend>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                            <template #append>
                                <i class="sfont password-icon"
                                    :class="passwordType ? 'system-yanjing-guan' : 'system-yanjing'"
                                    @click="passwordTypeChange"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <!-- 暂时不使用手机号验证，改为邮箱验证，有需求再启用 -->
                    <!-- 输入框：手机号 -->
                    <!-- <el-input size="large" v-model="form.phone_numbers" :placeholder="$t('message.system.phoneNumber')"
                        type="text" maxlength="11">
                        <template #prepend>
                            <el-icon>
                                <Iphone/>
                            </el-icon>
                        </template>
                        <template #append>
                            <el-button type="primary" @click="sendPhoneSmsCodeApi" size="large">
                                {{ timer > 0 ? timer + ' 秒后重新发送' : '发送验证码' }}
                            </el-button>
                        </template>
                    </el-input> -->

                    <!-- 输入框：邮箱 -->
                    <el-form-item prop="email">
                        <el-input size="large" v-model="form.email" placeholder="请输入邮箱" type="email">
                            <template #prepend>
                                <el-icon>
                                    <Message />
                                </el-icon>
                            </template>
                            
                        </el-input>
                    </el-form-item>


                    <!-- 输入框：验证码 -->
                    <el-form-item prop="sms">
                        <el-input size="large" v-model="form.sms" :placeholder="$t('message.system.plsInputSms')"
                            type="text" maxlength="6">
                            <template #prepend>
                                <el-icon>
                                    <CircleCheck />
                                </el-icon>
                            </template>
                            <template #append>
                                <el-button type="primary" @click="sendEmailSmsCodeApi" size="large">
                                    {{ timer > 0 ? timer + ' 秒后重新发送' : '发送验证码' }}
                                </el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- 按钮：注册 -->
                    <el-button type="primary" :loading="form.loading" @click="submit" style="width: 100%;" size="large">
                        {{ $t('message.system.register') }}
                    </el-button>
                </el-form>
                <!-- <div class="fixed-top-right">
                    <select-lang />
                </div> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { systemTitle, systemSubTitle } from '@/config'
import { defineComponent, ref, reactive, Ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import type { RouteLocationRaw } from 'vue-router'
import { getAuthRoutes } from '@/router/permission'
import { ElMessage } from 'element-plus'
// import selectLang from '@/layout/components/functionList/word.vue' // 语言切换组件
import { loginApi, registerApi, send_sms_codeApi, send_email_codeApi } from '@/api/user';
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import { User, Lock, Iphone, Message, CircleCheck } from '@element-plus/icons-vue'
export default defineComponent({
    components: {
        // selectLang,
        Lock,
        User,
        Message,
        Iphone,
        CircleCheck,
    },
    setup() {
        const ruleForm: Ref<ElFormItemContext | null> = ref(null)

        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const form = reactive({
            user_id: '',
            name: '',
            password: '',
            // phone_numbers: '',
            email: '',
            sms: '',
            is_super: 0,
            is_teacher: 0,
            loading: false,
            email_type: 'register',
        })
        const rules = {
            user_id: [{ required: true, message: '请输入学号', trigger: 'blur' }],
            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
            sms: [{ required: true, message: '请输入验证码', trigger: 'blur' }],

        }
        const timer = ref(0);
        const passwordType = ref('password')
        const passwordTypeChange = () => {
            passwordType.value === '' ? passwordType.value = 'password' : passwordType.value = ''
        }
        const checkForm = () => {
            return new Promise((resolve, reject) => {
                if (form.user_id === '') {
                    ElMessage.warning({
                        message: '学号不能为空',
                        type: 'warning'
                    });
                    return;
                }
                if (form.password === '') {
                    ElMessage.warning({
                        message: '密码不能为空',
                        type: 'warning'
                    })
                    return;
                }
                // if (form.phone_numbers === '') {
                //     ElMessage.warning({
                //         message: '请输入手机号',
                //         type: 'warning'
                //     })
                //     return;
                // }
                if (form.email === '') {
                    ElMessage.warning({
                        message: '请输入邮箱',
                        type: 'warning'
                    })
                    return;
                }
                if (form.sms === '') {
                    ElMessage.warning({
                        message: '请输入验证码',
                        type: 'warning'
                    })
                    return;
                }
                resolve(true)
            })
        }

        // const sendPhoneSmsCodeApi = () => {
        //     if (timer.value === 0) {
        //         timer.value = 60;
        //         send_sms_codeApi(form);
        //         const interval = setInterval(() => {
        //             timer.value--;
        //             if (timer.value === 0) {
        //                 clearInterval(interval);
        //             }
        //         }, 1000);
        //     }
        // }
        const sendEmailSmsCodeApi = () => {
            
            if (timer.value === 0) {
                timer.value = 60;
                send_email_codeApi(form);
                const interval = setInterval(() => {
                    timer.value--;
                    if (timer.value === 0) {
                        clearInterval(interval);
                    }
                }, 1000);
            }
        }

        const submit = () => {
            checkForm().then(() => {
                form.loading = true;

                registerApi(form).then((response: any) => {
                    try {
                        if (response.code === 200) {
                            ElMessage.success({
                                message: '注册成功',
                                type: 'success',
                                showClose: true,
                                duration: 5000
                            });
                            localStorage.setItem('user_id', form.user_id);
                            localStorage.setItem('password', '');
                            form.loading = false;
                            // location.reload();
                            router.push({ path: '/login', query: { name: form.user_id } });

                        } else {
                            console.error("注册失败")
                        }
                    } catch (error) {
                        console.error('处理登录成功后的操作时发生错误:', error);
                    } finally {
                        form.loading = false;
                    }
                });

            })
        }
        return {
            Lock,
            User,
            Message,
            Iphone,
            CircleCheck,
            systemTitle,
            systemSubTitle,
            form,
            ruleForm,
            rules,
            passwordType,
            passwordTypeChange,
            submit,
            // sendPhoneSmsCodeApi,
            sendEmailSmsCodeApi,
            timer,
        }
    }
})
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff url('@/assets/login/bg.png') no-repeat center;
    overflow: hidden;
    background-size: cover;
    cursor: pointer;
    user-select: none;

    .box {
        width: 1160px;
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        background: white;
        border-radius: 8px;
        transform: translate(-50%, -50%);
        height: 440px;
        overflow: hidden;
        box-shadow: 0 6px 20px 5px rgba(152, 152, 152, 0.1),
            0 16px 24px 2px rgba(117, 117, 117, 0.14);

        .login-content-left {
            position: relative;

            img {
                height: 440px;
            }

            .login-content-left-mask {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(rgba(0, 204, 222, 0.8), rgba(51, 132, 224, 0.8));
                text-align: center;
                color: #fff;
                font-size: 1.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                letter-spacing: 2px;

                div:nth-child(1) {
                    font-size: 3.5rem;
                    margin-bottom: 1em;
                }
            }
        }

        .box-inner {
            width: 500px;

            h1 {
                margin-top: 30px;
                text-align: center;
            }

            .form {
                width: 80%;
                margin: 50px auto 15px;

                .el-input {
                    margin-bottom: 3px;
                }

                .el-button {
                    justify-content: center;
                    text-align: center;
                    align-content: center;
                }

                .password-icon {
                    cursor: pointer;
                    color: #409eff;
                }

            }

            .fixed-top-right {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
    }
}

@media screen and (max-width: 1260px) {
    .login-content-left {
        display: none;
    }

    .box {
        width: 500px !important;
    }
}

@media screen and (max-width: 750px) {

    .container .box,
    .container .box-inner {
        width: 100vw !important;
        height: 100vh;
        box-shadow: none;
        left: 0;
        top: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h1 {
            margin-top: 0;
        }

        .form {}
    }
}
</style>